<div id="register" class="animate form login_form">
    <section class="login_content">
        <form>
            <h1>Create Account</h1>
            <div>
                <input
                        type="text"
                        v-model:value="user.userName"
                        class="form-control"
                        placeholder="Username"
                        required=""
                />
            </div>
            <div>
                <input type="email" v-model:value="user.email" class="form-control" placeholder="Email" required="" />
            </div>
            <div>
                <input
                        type="password"
                        v-model:value="user.password"
                        class="form-control"
                        placeholder="Password"
                        required=""
                />
            </div>
            <div>
                <a @click="register()" class="btn btn-default submit" href="javascript:void(0);">Submit</a>
            </div>

            <div class="clearfix"></div>

            <div class="separator">
                <p class="change_link">
                    Already a member ?
                    <a href="/login" class="to_register"> Log in </a>
                </p>

                <div class="clearfix"></div>
                <br />

                <div>
                    <h1><i class="fa fa-paw"></i> Gentelella Alela!</h1>
                    <p>©2016 All Rights Reserved. Gentelella Alela! is a Bootstrap 3 template. Privacy and Terms</p>
                </div>
            </div>
        </form>
    </section>
</div>

<!-- 注册 -->
<script>
    var registerVue = new Vue({
        el: "#register",
        data: {
            user: {
                userName: "",
                email: "",
                password: "",
            },
        },
        methods: {
            register: function () {
                if (this.user.userName == "" || this.user.email == "" || this.user.password == "") {
                    layer.alert("用户名、邮箱、密码不能为空。", { icon: 0 });
                    return;
                }
                console.log(this.user);

                var self = this;
                $.ajax({
                    url: "/api/user",
                    type: "post",
                    contentType: "application/json",
                    data: JSON.stringify(self.user),
                    success: function (data) {
                        if (data.status == 200) {
                            location.href = "/test/thymeleafIndex";
                        } else {
                            layer.msg(data.message, { icon: 0 });
                        }
                    },
                    error: function (data) {
                        layer.msg(data.responseText, { icon: 0 });
                    },
                });
            },
        },
    });
</script>